<!--
  ###license-information-start###
  E-PIX - Enterprise Patient Identifier Cross-referencing
  __
  Copyright (C) 2009 - 2017 The MOSAIC Project - Institut fuer Community Medicine der
  							Universitaetsmedizin Greifswald - mosaic-projekt@uni-greifswald.de
  							concept and implementation
  							c. schack, d.langner, l. geidel
  							web client
  							a. blumentritt
  							g. weiher
  							please cite our publications
  							http://dx.doi.org/10.3414/ME14-01-0133
  							http://dx.doi.org/10.1186/s12967-015-0545-6
  __
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  ###license-information-end###
  -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:customs="http://java.sun.com/jsf/composite/customs">
<!-- author: weiherg, blumentritta -->

<h:body>
	<ui:composition template="/template/ths_templ.xhtml">

		<ui:define name="meta_tags">
			<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
			<meta http-equiv="Pragma" content="no-cache" />
			<meta http-equiv="Expires" content="0" />
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<style media="screen" type="text/css">
.combine {
	overflow: auto;
}

.combine>div>div {
	overflow: visible;
}

.combine .table-header {
	margin-bottom: -2px;
	overflow: visible;
}

.combine .table-header td {
	padding-right: 0;
	width: 150px;
}

.combine .table-header td>div {
	width: 102px;
}

.combine .table-content {
	white-space: normal;
	overflow: visible;
}

.combine .table-content td {
	width: 140px;
}

.combine thead {
	display: none
}

.combine .ui-button-icon-only {
	width: 16px;
	height: 16px;
	border: none !important;
	position: relative;
	left: 1px;
	top: -12px;
	background: none !important;
}

.combine .grey {
	color: lightgrey;
}
</style>
		</ui:define>

		<!--  method is called when page is loaded / without output  -->
		<ui:define name="start">
			<h:outputText value="#{searchBean.onStart()}" />
		</ui:define>


		<ui:define name="customLogo">
			<a href="index.xhtml"><img src="#{request.contextPath}/img/epix_logo.png" /></a>
		</ui:define>

		<ui:define name="header_title">
			<h:outputFormat value="#{msg['general.headertitle']}" />
		</ui:define>

		<ui:define name="title">
			<h:outputFormat value="#{msg['general.title']}" />
		</ui:define>

		<ui:define name="info">
			<customs:headerMenu activeIndex="1" />
		</ui:define>

		<ui:define name="content">
			<p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false"
				closable="false" resizable="false">
				<p:graphicImage value="/img/ajax-loader_pf.gif" />
			</p:dialog>
			<script type="text/javascript">
				function start() {
					PF('statusDialog').show();
				}

				function stop() {
					PF('statusDialog').hide();
				}
			</script>
			<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
				<f:facet name="start">
					<p:graphicImage value="/img/ajax-loader_pf.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<p:messages autoUpdate="true" showDetail="true"></p:messages>

			<!-- ================ -->
			<!-- No data imported -->
			<!-- ================ -->
			<h:form id="main" enctype="multipart/form-data">
				<ui:fragment rendered="#{empty importBean.responses}">
					<h:outputText value="#{msg['batch.label.info']} " escape="false" />

					<!-- Step 1 -->
					<!-- ====== -->
					<h:outputText value="#{msg['batch.label.step1']}" styleClass="headline" />
					<p:panel>
						<p:selectBooleanCheckbox id="ignoreHeader" value="#{importBean.ignoreHeader}">
							<p:ajax process="@this" ignoreAutoUpdate="true" />
						</p:selectBooleanCheckbox>
						<p:outputLabel value=" use first line as header"></p:outputLabel>
						<p:fileUpload id="file_upload" label="Browse" uploadLabel="Upload" mode="advanced"
							allowTypes="/(\.|\/)(csv|txt)$/" auto="false" multiple="false" fileLimit="1"
							fileUploadListener="#{importBean.handleUpload}" update=":main:,:progress">
						</p:fileUpload>
					</p:panel>

					<!-- Step 2 -->
					<!-- ====== -->
					<h:outputText value="#{msg['batch.label.step2']}" styleClass="headline" />
					<ui:fragment rendered="#{!empty importBean.data}">
						<div class="combine">
							<p:dataTable id="persons_table_header" value="#{importBean.singleRow}" var="ignore"
								resizableColumns="true" liveResize="true" styleClass="table-header">
								<p:columns value="#{importBean.columns}" var="_column" columnIndexVar="i"
									styleClass="ui-state-default">
									<p:selectOneMenu value="#{_column.name}" height="400" disabled="#{!_column.active}">
										<f:selectItems value="#{importBean.columnsAvailable}" />
									</p:selectOneMenu>
									<!-- <p:selectBooleanCheckbox value="#{_column.active}" /> -->
									<p:commandButton update="main:persons_table_header, main:persons_table_data"
										process="main:persons_table_header" icon="ui-icon-close"
										actionListener="#{importBean.toggle(_column)}" rendered="#{_column.active}" />
									<p:commandButton update="main:persons_table_header, main:persons_table_data"
										process="main:persons_table_header" icon="ui-icon-plus"
										actionListener="#{importBean.toggle(_column)}" rendered="#{!_column.active}" />
								</p:columns>
							</p:dataTable>

							<p:dataTable id="persons_table_data" value="#{importBean.data}" var="_person"
								resizableColumns="true" liveResize="true" paginator="true" paginatorPosition="bottom"
								paginatorAlwaysVisible="false" rows="10" styleClass="table-content">
								<p:columns value="#{importBean.columns}" var="_column" columnIndexVar="i">
									<h:outputText value="#{_person[i]}" styleClass="#{!_column.active ? 'grey' : ''}" />
								</p:columns>
							</p:dataTable>
						</div>
					</ui:fragment>

					<!-- Step 3 -->
					<!-- ====== -->
					<h:outputText value="#{msg['batch.label.step3']}" styleClass="headline" />
					<ui:fragment rendered="#{!empty importBean.data}">
						<p:panelGrid styleClass="panelGrid">
							<p:row>
								<!-- <p:column styleClass="label">
									<p:outputLabel for="idd_select"
										value="#{msg['batch.label.chooseDomain']}"></p:outputLabel>
								</p:column> -->
								<p:column styleClass="label">
									<p:selectOneMenu label="#{msg.localDomain}" required="true"
										disabled="#{empty importBean.data}" id="idd_select"
										value="#{importBean.selectedIndentifierDomain}">
										<f:selectItem noSelectionOption="true"
											itemLabel="#{msg['batch.label.pleaseSelectDomain']}" itemValue="" />
										<f:selectItems value="#{importBean.identifierDomains}" var="identifierDomain"
											itemLabel="#{identifierDomain.name}" itemValue="#{identifierDomain.name}" />
										<p:ajax update="start_panel" process="@this"></p:ajax>
									</p:selectOneMenu>
									<p:message for="idd_select" showDetail="false"></p:message>
								</p:column>
								<p:column>
									<p:outputPanel id="start_panel">
										<!-- dummy button: workaround for conditional onClick. Will only be rendered with empty identifier domain. with causes a validtaion error -->
										<p:commandButton id="startButtonDummy"
											rendered="#{empty importBean.selectedIndentifierDomain}"
											value="#{msg['batch.label.startProcess']}" disabled="#{empty importBean.data}">
										</p:commandButton>
										<p:commandButton id="startButton"
											rendered="#{!empty importBean.selectedIndentifierDomain}"
											disabled="#{empty importBean.data}" value="#{msg['batch.label.startProcess']}"
											onclick="PF('progressDialog').show();PF('progressBar').start();"
											actionListener="#{importBean.handleImport}" update=":main,:result,:progress"
											oncomplete="PF('progressDialog').hide();PF('progressBar').cancel();"></p:commandButton>
									</p:outputPanel>

								</p:column>
							</p:row>
							<p:row>
								<p:column colspan="2">
									<p:messages for="idd_select" autoUpdate="true" showDetail="false"></p:messages>
								</p:column>
							</p:row>
						</p:panelGrid>
					</ui:fragment>
				</ui:fragment>
			</h:form>

			<!-- ============= -->
			<!-- data imported -->
			<!-- ============= -->
			<h:form id="result" enctype="multipart/form-data">
				<ui:fragment rendered="#{!empty importBean.responses}">
					<p:dataTable id="responses_table" resizableColumns="true" liveResize="true" paginator="true"
						paginatorAlwaysVisible="false" rows="10" paginatorPosition="bottom"
						value="#{importBean.responses}" var="response" style="white-space:normal;">
						<p:column headerText="#{msg.mpi}"
							sortBy="#{response.responseEntries.get(0).person.mpiid.value}">
							#{response.responseEntries.get(0).person.mpiid.value}
						</p:column>
						<p:column headerText="#{msg.localIdentifier}"
							sortBy="#{importBean.getLocalIdentifier( response.responseEntries.get(0).person.identifiers)}">
							#{importBean.getLocalIdentifier( response.responseEntries.get(0).person.identifiers)}
						</p:column>
						<p:column headerText="#{msg.responseMessage}"
							sortBy="#{response.responseEntries.get(0).errorCode.code}">
							#{response.responseEntries.get(0).errorCode.code}
						</p:column>
						<p:column headerText="#{msg.lastName}"
							sortBy="#{response.responseEntries.get(0).person.lastName}">
							#{response.responseEntries.get(0).person.lastName}
						</p:column>
						<p:column headerText="#{msg.firstName}"
							sortBy="#{response.responseEntries.get(0).person.firstName}">
							#{response.responseEntries.get(0).person.firstName}
						</p:column>
						<p:column headerText="#{msg.birthDate}"
							sortBy="#{response.responseEntries.get(0).person.birthDate}">
							#{response.responseEntries.get(0).person.birthDate}			
						</p:column>
						<p:column headerText="#{msg.gender}" sortBy="#{response.responseEntries.get(0).person.gender}">
							#{importBean.getGenderLabel(response.responseEntries.get(0).person.gender)}
						</p:column>
					</p:dataTable>
					<p:commandButton id="downloadAllLink" value="#{msg['import.label.downloadAll']}" ajax="false"
						actionListener="#{importBean.handleDownloadResultAll}"
						onclick="PrimeFaces.monitorDownload(start, stop)">
						<p:fileDownload value="#{importBean.downloadFile}" />
					</p:commandButton>
					<p:commandButton id="downloadErrorLink" value="#{msg['import.label.downloadError']}"
						ajax="false" actionListener="#{importBean.handleDownloadResultError}"
						onclick="PrimeFaces.monitorDownload(start, stop)">
						<p:fileDownload value="#{importBean.downloadFile}" />
					</p:commandButton>
				</ui:fragment>
			</h:form>

			<p:dialog widgetVar="progressDialog" id="progress" modal="true" closable="false"
				resizable="false" width="400px">
				<h:outputFormat value="#{msg['batch.label.processingEntries']}">
					<f:param value="#{importBean.data.size()}"></f:param>
				</h:outputFormat>
				<h:form>
					<p:progressBar widgetVar="progressBar" interval="3000" ajax="true" labelTemplate="{value}%"
						value="#{importBean.progress}">
						<p:ajax event="complete" oncomplete="PF('progressDialog').hide();" />
					</p:progressBar>
				</h:form>

			</p:dialog>

		</ui:define>

		<ui:define name="version">
			<h:outputText value="${display_version}" />
		</ui:define>

	</ui:composition>
</h:body>
</html>
